<template>
  <div
    v-loading="ChartLoading"
    class="linechart pyonline"
    style="height: 30rem; opacity: 1"
  />
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'
import { AjaxToken } from '@/api/common'
import { AjaxGet } from '@/api/common'
import { Loading } from 'element-ui'
import 'url-search-params-polyfill'

export default {
  mixins: [resize],
  props: {
    CpnID:"" ,
    ChnanelId:"",
    stDt:"",
    edDt:"",
    refsh:"",
    // {}表示要做prps验证 ，例子props{a:string || "",
    // b:{
    //   type:string,
    //  required:true
    //
    // }};[]则不验证，例子props['a','b']
  },
  data() {
    return {
      ChartLoading: true,
      chart: null
    }
  },
  watch: {
    CpnID: {
      deep: true,
      handler(val) {
        this.chart.dispose()
        this.initChart()
      }
    },
    ChnanelId: {
      deep: true,
      handler(val) {
        this.chart.dispose()
        this.initChart()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el)
      this.setOptions(this)
    },
    setOptions(thisobj) {
      this.Seach()
    },
    Seach() {
      var params = new URLSearchParams()
      params.append('CpnID', this.CpnID)
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',

        target: document.querySelector('.pyonline')
      })
      backstage.GetPyOnlineChart(this, params, loading)
    }
  }
}
var backstage = {
  // 获取Mngrbaseinfo集合
  GetPyOnlineChart: function(thisobj, params, loading) {
    setTimeout(function() {
      AjaxToken(
        thisobj,
        'GetPyOnlineChart',
        params,
        'post',
        function(res) {
          loading.close()
          // thisobj.ChartLoading=false;
          var result = res.data.data
          var linedata_x = result[0].linedata_x
          var chartdatas = result
          var legenddata = []
          result.forEach((element) => {
            legenddata.push(element.name)
          })
          // 对话框图片
          var uploadedDataURL = '/asset/get/s/data-1547533200844-7eBMgp66l.png'

          var dataArr = result[1].data // 当前工作前置机总数
          var dataArr2 = result[2].data // 可用 但有异常
          var dataArrLine = result[0].data // 可用前置机总数
          var legendData = [
            '前置机总数',
            '当前工作前置机总数',
            '当前工作但报告支付异常的前置机总数'
          ]
          var areaStyle = {
            silent: false,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
                  {
                    offset: 1,
                    color: 'rgba(228, 239, 251, 100)' // 0% 处的颜色
                  },

                  {
                    offset: 0,
                    color: 'rgba(228, 239, 251, 0)' // 100% 处的颜色
                  }
                ])
              }
            },

            data: [
              [
                {
                  // name: '预警区域',
                  // xAxis: '产品4',
                  yAxis: 2000,
                  label: {
                    normal: {
                      offset: [500, 500],
                      fontSize: 14
                    }
                  }
                },
                {
                  yAxis: 4000
                  // xAxis: '产品9'
                }
              ]
            ]
          }
          var option = {
            title: {
              text: '实时在线前置机数量监控'
            },

            legend: {
              data: legendData,
              orient: 'vertical',
              left: 'right',
              top: '20%'
            },
            grid: {
              left: '2%',
              right: '14%',
              bottom: '3%',
              containLabel: true
            },
            tooltip: {
              trigger: 'axis',
              label: {
                show: true
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: true, // 坐标轴两边留白
              data: linedata_x,
              axisLabel: {
                // 坐标轴刻度标签的相关设置。
                interval: 0, // 设置为 1，表示『隔一个标签显示一个标签』
                //	margin:15,
                textStyle: {
                  color: '#1B253A',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12
                },
                formatter: function(params) {
                  var newParamsName = ''
                  var paramsNameNumber = params.length
                  var provideNumber = 3 // 一行显示几个字
                  var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
                  if (paramsNameNumber > provideNumber) {
                    for (var p = 0; p < rowNumber; p++) {
                      var tempStr = ''
                      var start = p * provideNumber
                      var end = start + provideNumber
                      if (p == rowNumber - 1) {
                        tempStr = params.substring(start, paramsNameNumber)
                      } else {
                        tempStr = params.substring(start, end) + '\n'
                      }
                      newParamsName += tempStr
                    }
                  } else {
                    newParamsName = params
                  }
                  return newParamsName
                }
                // rotate:50,
              },
              axisTick: {
                // 坐标轴刻度相关设置。
                show: false
              },
              axisLine: {
                // 坐标轴轴线相关设置
                lineStyle: {
                  color: '#E5E9ED'
                  // opacity:0.2
                }
              },
              splitLine: {
                // 坐标轴在 grid 区域中的分隔线。
                show: false,
                lineStyle: {
                  color: '#E5E9ED'
                  // 	opacity:0.1
                }
              }
            },
            yAxis: [
              {
                type: 'value',
                name: '单位：台',
                splitNumber: 5,
                axisLabel: {
                  textStyle: {
                    color: '#a8aab0',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 12
                  }
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    color: 'rgba(33,148,246,0.2)'
                  }
                }
              }
            ],
            series: [
              {
                name: '前置机总数',
                type: 'line',
                smooth: true,
                // symbol: "circle", //拐点的形状
                // symbolSize: 10,
                symbol: 'none',
                itemStyle: {
                  normal: {
                    lineStyle: {
                      type: 'dashed'
                      // 折点的颜色
                      // color: "#00a2e6"
                    },
                    color: 'rgba(32, 126, 251, 1)', // 拐点的颜色
                    borderColor: 'rgba(32, 126, 251, 1)' // 拐点边框的颜色
                  }
                },
                // markArea: {
                //   data: [
                //     [
                //       {
                //         yAxis: "0",
                //         itemStyle: {
                //           normal: {
                //             //  看这里，加了这个属性
                //             color: {
                //               type: "linear",
                //               x: 0,
                //               y: 0,
                //               x2: 0,
                //               y2: 1,
                //               colorStops: [
                //                 {
                //                   offset: 0,
                //                   color: "#ccc", // 0% 处的颜色
                //                 },
                //                 {
                //                   offset: 1,
                //                   color: "#fff", // 100% 处的颜色
                //                 },
                //               ],
                //               global: false, // 缺省为 false
                //             },
                //           },
                //         },
                //       },
                //       {
                //         yAxis: "120",
                //       },
                //     ],
                //   ],
                // },

                data: dataArrLine
              },

              // 区间
              {
                name: '',
                type: 'line',
                markArea: areaStyle
              },
              {
                name: '当前工作前置机总数',
                type: 'line',
                symbol: 'circle',
                symbolSize: 7,
                lineStyle: {
                  color: 'rgba(26, 180, 72, 1)'
                },
                itemStyle: {
                  color: 'rgba(26, 180, 72, 1)',
                  borderWidth: 1,
                  borderColor: '#FFF'
                },
                label: {
                  show: false,
                  distance: 1,
                  emphasis: {
                    show: false,
                    offset: [25, -2],
                    backgroundColor: {
                      image: uploadedDataURL
                    },
                    color: '#FFF',
                    padding: [8, 20, 8, 6],
                    // width:60,
                    height: 36,
                    formatter: function(params) {
                      var name = params.name
                      var value = params.data
                      var str = name + '\n数据量：' + value
                      return str
                    },
                    rich: {
                      bg: {
                        backgroundColor: {
                          image: uploadedDataURL
                        },
                        width: 78,
                        // height:42,
                        color: '#FFF',
                        padding: [20, 0, 20, 10]
                      },
                      br: {
                        width: '100%',
                        height: '100%'
                      }
                    }
                  }
                },

                data: dataArr
              },
              {
                name: '当前工作但报告支付异常的前置机总数',
                type: 'line',
                symbol: 'circle',
                symbolSize: 7,
                lineStyle: {
                  color: 'rgba(232, 83, 78, 1)'
                },
                itemStyle: {
                  color: 'rgba(232, 83, 78, 1)',
                  borderWidth: 1,
                  borderColor: '#FFF'
                },
                label: {
                  show: false,
                  distance: 1,
                  emphasis: {
                    show: false,
                    offset: [25, -2],
                    backgroundColor: {
                      image: uploadedDataURL
                    },
                    color: '#FFF',
                    padding: [8, 20, 8, 6],
                    // width:60,
                    height: 36,
                    formatter: function(params) {
                      var name = params.name
                      var value = params.data
                      var str = name + '\n数据量：' + value
                      return str
                    },
                    rich: {
                      bg: {
                        backgroundColor: {
                          image: uploadedDataURL
                        },
                        width: 78,
                        // height:42,
                        color: '#FFF',
                        padding: [20, 0, 20, 10]
                      },
                      br: {
                        width: '100%',
                        height: '100%'
                      }
                    }
                  }
                },
                data: dataArr2
              }
            ]
          }
          thisobj.chart.setOption(option)
        },
        function(err) {}
      )
    }, 5 * 1000)
  }
}
</script>
<style lang="scss" scoped>
</style>
